<template>
  <el-drawer
    :model-value="drawerVisible"
    title="详情"
    direction="rtl"
    size="55%"
    @close="close"
    :with-header="false"
  >
    <h4>基本信息</h4>
    <div class="textBody">
      <div class="detailRow">
        <span class="rowName">商户id：</span>
        <span class="rowValue"> {{ detailInfo.merchant_id }}</span>
      </div>
      <div class="detailRow">
        <span class="rowName">充值金额：</span>
        <span class="rowValue">
          {{ detailInfo.amount }} {{ detailInfo.currency }}</span
        >
      </div>
      <div class="detailRow">
        <span class="rowName">付款时间：</span>
        <span class="rowValue">
          {{ formatDates(detailInfo.send_pay_time) }}</span
        >
      </div>
      <div class="detailRow">
        <span class="rowName">银行到账金额：</span>
        <span class="rowValue">
          {{ detailInfo.actual_amount }} {{ detailInfo.currency }}</span
        >
      </div>
      <div class="detailRow">
        <span class="rowName">银行到账时间：</span>
        <span class="rowValue">
          {{ formatDates(detailInfo.receive_actual_time) }}
        </span>
      </div>
      <div class="detailRow">
        <span class="rowName">手续费：</span>
        <span class="rowValue">
          {{ detailInfo.fee }} ({{ detailInfo.fee_rate * 100 }}%)</span
        >
      </div>
      <div class="detailRow">
        <span class="rowName">订单状态：</span>
        <span class="rowValue">
          <el-tag
            :type="
              detailInfo.status == 1
                ? 'success'
                : detailInfo.status == 0
                ? 'warning'
                : 'danger'
            "
          >
            {{
              detailInfo.status == 1
                ? "成功"
                : detailInfo.status == 2
                ? "失败"
                : detailInfo.status == 3
                ? "取消"
                : "处理中"
            }}
          </el-tag></span
        >
      </div>
      <div class="detailRow">
        <span class="rowName">商户审核：</span>
        <span class="rowValue">
          <el-tag
            :type="
              detailInfo.mer_review_status == 1
                ? 'success'
                : detailInfo.mer_review_status == 0
                ? 'warning'
                : 'danger'
            "
          >
            {{
              detailInfo.mer_review_status == 1
                ? "已审核"
                : detailInfo.mer_review_status == 2
                ? "拒绝"
                : "未审核"
            }}
          </el-tag></span
        >
      </div>
      <div class="detailRow">
        <span class="rowName">系统审核：</span>
        <span class="rowValue">
          <el-tag
            :type="
              detailInfo.sys_review_status == 1
                ? 'success'
                : detailInfo.sys_review_status == 0
                ? 'warning'
                : 'danger'
            "
          >
            {{
              detailInfo.sys_review_status == 1
                ? "已审核"
                : detailInfo.sys_review_status == 2
                ? "拒绝"
                : "未审核"
            }}
          </el-tag></span
        >
      </div>
      <div class="detailRow">
        <span class="rowName">审核人：</span>
        <span class="rowValue"> {{ detailInfo.sys_auditor }} </span>
      </div>
      <div class="detailRow">
        <span class="rowName">审核时间：</span>
        <span class="rowValue">
          {{ formatDates(detailInfo.sys_audit_time) }}
        </span>
      </div>
      <div class="detailRow">
        <span class="rowName">订单流水号：</span>
        <span class="rowValue"> {{ detailInfo.order_no }}</span>
      </div>
    </div>
    <h4>审核信息</h4>
    <div class="textBody">
      <el-table :data="auditHistory" style="width: 100%">
        <el-table-column
          prop="audit_level"
          label="审核步骤"
          width="150"
          align="center"
        >
          <template #default="scope">
            第 {{ scope.row.audit_level }} 审
          </template>
        </el-table-column>
        <el-table-column prop="group_name" label="审核组" align="center">
          <template #default="scope">
            {{ scope.row.group_name || "--" }}
          </template>
        </el-table-column>
        <el-table-column prop="his_audit_user" label="审核人员" align="center">
          <template #default="scope">
            {{ scope.row.his_audit_user || "--" }}
          </template>
        </el-table-column>
        <el-table-column
          prop="his_createtime"
          label="审核时间"
          :formatter="formatterTime"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="his_audit_result"
          label="审核结果"
          align="center"
        >
          <template #default="scope">
            <el-tag v-if="scope.row.his_audit_result"
              :type="
                scope.row.his_audit_result == 'pass' ? 'success' : 'danger'
              "
              >{{
                scope.row.his_audit_result == "pass" ? "通过" : "拒绝"
              }}</el-tag
            >
          </template>
        </el-table-column>
        <el-table-column
          prop="his_remark"
          label="审核说明"
          align="center"
        ></el-table-column>
      </el-table>
    </div>
    <h4>付款信息</h4>
    <div class="textBody">
      <el-table :data="[detailInfo]" style="width: 100%">
        <el-table-column prop="send_name" label="付款名称" align="center">
          <template #default="scope">
            {{ scope.row.send_name || "--" }}
          </template>
        </el-table-column>
        <el-table-column prop="send_bank" label="付款银行" align="center">
          <template #default="scope">
            {{ scope.row.send_bank }} {{ scope.row.send_branch }}
          </template>
        </el-table-column>
        <el-table-column
          prop="send_card_number"
          label="付款账号"
          align="center"
        />
        <el-table-column
          prop="send_card_name"
          label="付款姓名"
          align="center"
        />
        <el-table-column prop="send_swift_code" label="Swift码" align="center">
          <template #default="scope">
            {{ scope.row.send_swift_code || "--" }}
          </template>
        </el-table-column>
        <el-table-column prop="send_extended" label="补充信息" align="center">
          <template #default="scope">
            {{ scope.row.send_extended || "--" }}
          </template>
        </el-table-column>
        <el-table-column prop="payment_way" label="支付方式" align="center">
          <template #default="scope">
            {{ scope.row.payment_way || "--" }}
          </template>
        </el-table-column>
        <el-table-column
          prop="payment_order_no"
          label="支付流水号"
          align="center"
        >
          <template #default="scope">
            {{ scope.row.payment_order_no || "--" }}
          </template>
        </el-table-column>
        <el-table-column
          prop="payment_order_no"
          label="付款凭证"
          align="center"
        >
          <template #default="scope">
            <div v-if="scope.row.attachments.recharge_send.length">
              <el-image
                style="width: 50px; height: 50px"
                v-for="i in scope.row.attachments.recharge_send"
                :src="i"
                alt
                fit="fill"
                :preview-src-list="[i]"
                :preview-teleported="true"
              />
            </div>
            <span v-else>--</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <h4>收款信息</h4>
    <div class="textBody">
      <el-table :data="[detailInfo]" style="width: 100%">
        <el-table-column prop="receive_name" label="收款名称" align="center">
          <template #default="scope">
            <el-tooltip
              class="box-item"
              effect="dark"
              :content="scope.row.receive_name"
              placement="top"
              :disabled="!scope.row.receive_name"
            >
              <span class="ellipsis">{{ scope.row.receive_name || "--" }}</span>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column prop="receive_bank" label="收款银行" align="center">
          <template #default="scope">
            <el-tooltip
              class="box-item"
              effect="dark"
              :disabled="!scope.row.receive_bank"
              :content="scope.row.receive_bank + scope.row.receive_branch"
              {{
              scope.row.receive_bank
              }}
            >
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column
          prop="receive_card_number"
          label="收款账号"
          width="150"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="receive_card_name"
          label="收款姓名"
          align="center"
        >
          <template #default="scope">
            <el-tooltip
              class="box-item"
              effect="dark"
              :disabled="!scope.row.receive_card_name"
              :content="scope.row.receive_card_name"
              placement="top"
            >
              <span class="ellipsis">{{
                scope.row.receive_card_name || "--"
              }}</span>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column
          prop="receive_swift_code"
          label="Swift码"
          align="center"
        >
          <template #default="scope">
            {{ scope.row.receive_swift_code || "--" }}
          </template>
        </el-table-column>
        <el-table-column
          prop="receive_extended"
          label="补充信息"
          align="center"
        >
          <template #default="scope">
            {{ scope.row.receive_extended || "--" }}
          </template>
        </el-table-column>
        <el-table-column
          prop="receive_extended"
          label="收款凭证"
          align="center"
        >
          <template #default="scope">
            <el-image
              class="rowValue"
              style="width: 50px; height: 50px"
              v-for="x in scope.row.attachments.recharge_receive"
              :src="x"
              alt
              fit="fill"
              :preview-src-list="[x]"
              :preview-teleported="true"
            />
          </template>
        </el-table-column>
      </el-table>
    </div>
  </el-drawer>
</template>
<script setup>
import { formatDates, formatterTime } from "@/utils/utils";
defineProps({
  drawerVisible: {
    type: Boolean,
    default: false,
  },
  detailInfo: { type: Object, default: {} },
  auditHistory: { type: Array, default: [] },
});
const close = () => {};
</script>
<style lang="scss" scoped>
.textBody {
  margin: 2% 0;
}
.detailRow {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  margin: 2% 0;

  .rowName {
    min-width: 30%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
  }

  .rowValue {
    word-break: break-all;
  }
}
</style>
